<template>
  <div class="flex flex-col">
    <!-- 顶部导航 -->
    <ArtopgroupResponsiveNav></ArtopgroupResponsiveNav>
    <!-- 企业理念 -->
    <div class="w-full h-screen bg-black text-white relative">
      <video
        class="h-full w-full object-fill"
        preload="auto"
        loop
        autoplay
        muted
        playsinline
        x-webkit-airplay="allow"
        x5-video-player-type="h5"
      >
        <source
          type="video/mp4"
          src="https://artopgroup.com/upload/2022-07/28/12e90afaa9ca125623519e75ff86338e_0.mp4"
        />
        <source
          type="video/ogg"
          :src="`/${BASE_PATH}/artopgroup/video/bg-1.avi`"
        />
        <source
          type="video/webm"
          :src="`/${BASE_PATH}/artopgroup/video/bg-1.avi`"
        />
      </video>
      <div
        class="absolute z-10 top-52 left-0 right-0 h-small:top-28 v-small:top-28"
      >
        <div class="m-auto px-6 xl:w-[1200px] text-center">
          <ArtopgroupScrollFadeIn>
            <h2 class="text-2xl font-black xl:text-5xl">
              浪尖全产业链设计创新<span
                style="font-size: 16px; vertical-align: super"
                >®</span
              >服务生态
            </h2>
            <p class="xl:text-2xl">
              <br />浪尖设计集团有限公司1999年诞生于中国最具创新活力的城市——深圳，是以工业设计为核心的产业化创新服务机构。集团拥有两个“国家级工业设计中心”认定，是世界设计组织（WDO）在中国大陆工业设计企业会员单位是中国乃至全球工业设计领域规模大、创新和实现能力强、供应链资源覆盖广泛的专业化全产业链设计创新服务商。<br /><br />集团以系统性思维和持续发展的战略眼光，通过三大创新体系、六大服务板块、十大能力保障，<br />致力于打造全球领先的全产业链设计创新服务生态。
            </p>
          </ArtopgroupScrollFadeIn>
        </div>
      </div>
    </div>
    <!-- 这里之所以填充了一个黑色背景，是因为一行放三个video，无法完全充满整个容器，会存在细小间隙,如果不填充黑色，那就是白色 -->
    <div class="flex flex-col md:flex-row bg-black">
      <div class="md:w-1/3">
        <ArtopgroupFeature
          title="社会级创新体系"
          subTitle="SOCIAL-LEVEL INNOVATION SYSTEM"
          content="社会级创新体系聚焦于提升城市和区域发展力——基于浪尖的全球化布局和平台化发展，通过构建全产业链设计创新平台（D+M模式™、交互式全景教育™等），发挥设计引领对资源配置优化的重要作用，打造贯穿和推动一产、二产、三产融合发展的赋能体系，营造社会创新文化，帮助人们创造美好生活，推动城市绿色可持续发展。"
          bgVideoSrc="https://artopgroup.com/upload/2022-07/28/31f95c20c62c89595ce437d6c61fec5a_0.mp4"
        ></ArtopgroupFeature>
      </div>
      <div class="md:w-1/3">
        <ArtopgroupFeature
          title="产业级创新体系"
          subTitle="INDUSTRY-LEVEL INNOVATION SYSTEM"
          content="产业级创新体系聚焦于提升行业和产业能动力——基于浪尖搭建的涵盖战略咨询、品牌策略、用户体验研究、供应链、人因工程、高端制造、知识产权、人才培养和投资孵化等工业设计全产业链的深耕，以对行业和产业发展趋势的洞见打通壁垒，加速科技成果转化和应用创新，提供满足多维需要、可持续发展的整体解决方案。"
          bgVideoSrc="https://artopgroup.com/upload/2022-07/28/513789a8a344cda1b5be8eeceb076ebf_0.mp4"
        ></ArtopgroupFeature>
      </div>
      <div class="md:w-1/3">
        <ArtopgroupFeature
          title="产品级创新体系"
          subTitle="PRODUCT-LEVEL INNOVATION SYSTEM"
          content="产品级创新体系聚焦于提升产品和企业竞争力——基于浪尖超过20年对衣、食、住、行、娱、乐、康、游、购以及军民融合等全领域产品的洞察和经验积累，以设计工具创新和跨界、跨域、跨时代的眼光重新定义“产品赛道”，提供不断超越同类竞品、更具持久生命力、可迭代的产品创新解决方案，助推企业加快转型升级步伐。"
          bgVideoSrc="https://artopgroup.com/upload/2022-07/28/48a35939e548f7e5ce2de81cb1435e9b_0.mp4"
        ></ArtopgroupFeature>
      </div>
    </div>
    <div
      class="bg-white h-40 flex flex-col justify-center items-center font-bold text-2xl"
    >
      <ArtopgroupScrollFadeIn>六大服务板块</ArtopgroupScrollFadeIn>
    </div>
    <div class="flex flex-col md:flex-row md:flex-wrap">
      <ArtopgroupServiceSection
        class="md:w-1/3"
        v-for="(serviceSection, idx) in serviceSectionList"
        :key="idx"
        :title="serviceSection.title"
        :content="serviceSection.content"
        :toLink="serviceSection.toLink"
        :bgColor="serviceSection.bgColor"
        :imgSrc="serviceSection.imgSrc"
      ></ArtopgroupServiceSection>
    </div>
    <div class="flex flex-col text-center">
      <h2 class="text-3xl text-red-500 py-10">
        <ArtopgroupScrollFadeIn> 十大能力保障 </ArtopgroupScrollFadeIn>
      </h2>
      <p class="text-xl xl:w-[1300px] px-8 m-auto">
        <ArtopgroupScrollFadeIn>
          浪尖以多元人才建制和长效人才供给为核心的人才保障、来自全球16座城市56个专业机构的服务保障、平衡高效的设计管理流程及知识产权管理的品质保障等十大能力保障，为客户提供产品规划、创意设计、研究开发、生产制造、采购物流、成本控制、品质控制、市场营销和品牌策划等一体规划的
          “大设计”解决方案。
        </ArtopgroupScrollFadeIn>
      </p>
    </div>
    <div class="flex flex-row justify-center flex-wrap mt-28">
      <div class="flex flex-col items-center w-1/2 md:w-1/5 mb-28">
        <ArtopgroupNumberShow :num="24" unit="年"></ArtopgroupNumberShow>
        <div>设计服务经验</div>
      </div>
      <div class="flex flex-col items-center w-1/2 md:w-1/5 mb-28">
        <ArtopgroupNumberShow :num="56" unit="家"></ArtopgroupNumberShow>
        <div>全资/控股和分子机构</div>
      </div>
      <div class="flex flex-col items-center w-1/2 md:w-1/5 mb-28">
        <ArtopgroupNumberShow :num="1000" unit="+"></ArtopgroupNumberShow>
        <div>专业服务人员</div>
      </div>
      <div class="flex flex-col items-center w-1/2 md:w-1/5 mb-28">
        <ArtopgroupNumberShow :num="9000" unit="+"></ArtopgroupNumberShow>
        <div>国内外品牌客户</div>
      </div>
    </div>
    <div class="flex flex-col xl:flex-row">
      <div class="xl:flex-1 xl:w-0">
        <video
          class="object-fill"
          preload="auto"
          loop
          autoplay
          muted
          playsinline
          x-webkit-airplay="allow"
          x5-video-player-type="h5"
        >
          <source
            type="video/mp4"
            src="https://artopgroup.com/upload/2022-08/01/99b71dc4cab0d31dbdd44c4b903f090e_0.mp4"
          />
          <source
            type="video/ogg"
            src="https://artopgroup.com/upload/2022-08/01/99b71dc4cab0d31dbdd44c4b903f090e_0.mp4"
          />
          <source
            type="video/webm"
            src="https://artopgroup.com/upload/2022-08/01/99b71dc4cab0d31dbdd44c4b903f090e_0.mp4"
          />
        </video>
      </div>
      <div
        class="xl:flex-shrink-0 xl:w-[500px] flex flex-col md:flex-row xl:flex-col"
      >
        <div
          class="flex flex-col justify-center items-center h-1/2 bg-gray-100"
        >
          <h2 class="text-xl font-bold text-red-600">业务合作洽谈</h2>
          <h3 class="text-lg my-2">0755- 1234 5678 （总部）</h3>
          <a href="mailto:test@126.com">客服邮箱：test@126.com</a>
          <NuxtImg
            :src="`/artopgroup/pic/06.jpg`"
            class="w-[45%] rounded my-2"
          />
          <a
            href="tel:15098372221"
            class="border-b-2 border-gray-900 border-solid"
            >立即联系</a
          >
        </div>
        <div
          class="flex flex-col justify-center items-center h-1/2 bg-gray-200"
        >
          <h2 class="text-xl font-bold text-red-600">业务合作洽谈</h2>
          <h3 class="text-lg my-2">0755- 1234 5678 （总部）</h3>
          <a href="mailto:test@126.com">客服邮箱：test@126.com</a>
          <NuxtImg
            :src="`/artopgroup/pic/06.jpg`"
            class="w-[45%] rounded my-2"
          />
          <a
            href="tel:15098372221"
            class="border-b-2 border-gray-900 border-solid"
            >立即联系</a
          >
        </div>
      </div>
    </div>
    <div>
      <ArtopgroupSimpleTab sectionName="新闻分类" :tabArr="tabArr">
        <template #default="{ activeTab }">
          <ArtopgroupThreePicShow
            :picInfoArr="
              activeTab?.tabFlag === '所有' ? picInfoArr : picInfoArr2
            "
          ></ArtopgroupThreePicShow>
        </template>
      </ArtopgroupSimpleTab>
    </div>
    <div class="flex flex-col">
      <div class="mt-20">
        <ArtopgroupLogoLoop
          :logoPicSrcArr="logoPicSrcArr[0]"
        ></ArtopgroupLogoLoop>
      </div>
      <div class="mt-8">
        <ArtopgroupLogoLoop
          :delay-start="300"
          :logoPicSrcArr="logoPicSrcArr[1]"
        ></ArtopgroupLogoLoop>
      </div>
      <div class="mt-8 mb-20">
        <ArtopgroupLogoLoop
          :logoPicSrcArr="logoPicSrcArr[2]"
          :delay-start="600"
        ></ArtopgroupLogoLoop>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ThreePicInfo } from "~components/artopgroup/three-pic-show/index.d.ts";
import type { ArtopgroupSimpleTabStruct } from "~components/artopgroup/simple-tab/index.d.ts";
import { updateFavicon } from "~utils/site.ts";
const config = useRuntimeConfig();
const { BASE_PATH } = config.public;

definePageMeta({
  layout: false,
});

let batch = 0;
const logoPicSrcArr: string[][] = [];
let arr: string[] | null = null;
for (let i = 0; i < 30; i++) {
  if (i % 10 === 0) {
    batch++;
    arr = [];
    logoPicSrcArr.push(arr);
  }
  let fileIndex = i + 1;
  const fileName = fileIndex < 10 ? `0${fileIndex}.jpg` : `${fileIndex}.jpg`;
  arr && arr.push(`/artopgroup/logo/${fileName}`);
}
const tabArr: ArtopgroupSimpleTabStruct[] = [
  {
    tabFlag: "所有",
    title: "所有",
  },
  {
    tabFlag: "企业动态",
    title: "企业动态",
  },
  {
    tabFlag: "浪莎视角",
    title: "浪莎视角",
  },
  {
    tabFlag: "社会责任",
    title: "社会责任",
  },
  {
    tabFlag: "尖兵团",
    title: "尖兵团",
  },
  {
    tabFlag: "浪尖学院",
    title: "浪尖学院",
  },
  {
    tabFlag: "创新蓝图",
    title: "创新蓝图",
  },
];
const picInfoArr: ThreePicInfo[] = [
  {
    picSrc: `/artopgroup/pic/01.png`,
    title: "设计服务与服务设计",
    date: "2022年08月20日",
  },
  {
    picSrc: `/artopgroup/pic/02.png`,
    title:
      "以全产业链工业设计创新赋能农产品智慧流通新模式——农产品智慧流通工业设计研究院",
    date: "2022年08月20日",
  },
  {
    picSrc: `/artopgroup/pic/03.png`,
    title:
      "以全产业链工业设计创新赋能农产品智慧流通新模式——农产品智慧流通工业设计研究院",
    date: "2022年08月20日",
  },
];

const picInfoArr2: ThreePicInfo[] = [...picInfoArr].reverse();

interface ServiceSection {
  title?: string;
  content?: string;
  toLink?: string;
  bgColor?: string;
  imgSrc?: string;
}
const serviceSectionList = ref<ServiceSection[]>([
  { imgSrc: `/${BASE_PATH}/artopgroup/pic/01.jpg` },
  {
    title: "设计服务与服务设计",
    content:
      "23年根植产品创新设计服务领域，将设计聚焦于企业产品本身的渐进式创新和颠覆式创新。",
    toLink: "https://www.baidu.com",
    bgColor: "rgb(85, 85, 85)",
  },
  { imgSrc: `/${BASE_PATH}/artopgroup/pic/02.jpg` },

  {
    title: "设计服务与服务设计",
    content:
      "23年根植产品创新设计服务领域，将设计聚焦于企业产品本身的渐进式创新和颠覆式创新。",
    toLink: "https://www.baidu.com",
    bgColor: "#ffdd02",
  },
  { imgSrc: `/${BASE_PATH}/artopgroup/pic/03.jpg` },
  {
    title: "设计服务与服务设计",
    content:
      "23年根植产品创新设计服务领域，将设计聚焦于企业产品本身的渐进式创新和颠覆式创新。",
    toLink: "https://www.baidu.com",
    bgColor: "#df0011",
  },

  { imgSrc: `/${BASE_PATH}/artopgroup/pic/04.jpg` },
  {
    title: "设计服务与服务设计",
    content:
      "23年根植产品创新设计服务领域，将设计聚焦于企业产品本身的渐进式创新和颠覆式创新。",
    toLink: "https://www.baidu.com",
    bgColor: "rgb(85, 85, 85)",
  },
  { imgSrc: `/${BASE_PATH}/artopgroup/pic/05.jpg` },

  {
    title: "设计服务与服务设计",
    content:
      "23年根植产品创新设计服务领域，将设计聚焦于企业产品本身的渐进式创新和颠覆式创新。",
    toLink: "https://www.baidu.com",
    bgColor: "#df0011",
  },
  { imgSrc: `/${BASE_PATH}/artopgroup/pic/06.gif` },
  {
    title: "设计服务与服务设计",
    content:
      "23年根植产品创新设计服务领域，将设计聚焦于企业产品本身的渐进式创新和颠覆式创新。",
    toLink: "https://www.baidu.com",
    bgColor: "#0259db",
  },
]);
useHead({
  title: "AG-首页",
  htmlAttrs: {
    lang: "zh-CN",
  },
});
onMounted(() => {
  updateFavicon(`/${BASE_PATH}/artopgroup/favicon.ico`);
});
</script>

<style scoped></style>
